<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/music.css}">
</head>
<body>
    <div th:replace="index/index :: nav">
        <!-- 头部位置-->
    </div>
    <!--这是音乐首页-->
    <div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
    <!--轮播图-->
                <div id="myCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img style="height:600px;width: 1200px" th:src="@{/image/music/bg3.jpg}" alt="First slide">
                            <div class="carousel-caption">
                                <h4>
                                   TaylorSwift
                                </h4>
                                <p>
                                    泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾夕法尼亚州，美国流行音乐、乡村音乐创作型女歌手、音乐制作人、演员、慈善家。
                                </p>
                            </div>
                        </div>
                        <div class="item">
                            <img style="height:600px;width: 1200px"th:src="@{/image/music/bg2.jpg}" alt="Second slide">
                            <div class="carousel-caption">
                                <h4>
                                    ME
                                </h4>
                                <p>
                                    与美国男歌手布伦登·尤里合作单曲《ME!》作为泰勒·斯威夫特的第七张个人录音室专辑的首支单曲发行
                                </p>
                            </div>

                        </div>
                        <div class="item">
                            <img style="height:600px;width:1200px"th:src="@{/image/music/iwy.png}" alt="Third slide">
                            <div class="carousel-caption">
                                <h4>比莉·艾利什（Billie Eilish）</h4>
                                <p>2001年12月18日出生于美国加利福尼亚州洛杉矶，美国女歌手、词曲作者、模特。</p>
                            </div>
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
    <hr>
                        <div class="jumbotron well">
                            <h4 class="text-center text-info">热门专辑</h4>
                            <p>
                            <div class="row clearfix">
                                <div class="col-md-6 column">
                                    <div class="row clearfix">
                                        <div class="col-md-6  image">
                                            <a th:href="@{/music/songlist(id=1)}">
                                                <img th:src="@{/image/music/musiclist/lover.jpg}" class="img-circle img-responsive center-block"/>
                                            <span class="glyphicon glyphicon-headphones">lover</span></a>
                                        </div>
                                        <div class="col-md-6 column image">
                                            <a th:href="@{/music/songlist(id=2)}">
                                                <img  th:src="@{/image/music/musiclist/1989.jpg}" class="img-circle img-responsive center-block"/>
                                            <span class="glyphicon glyphicon-headphones">1989</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 column">
                                    <div class="row clearfix">
                                        <div class="col-md-6 column image">
                                            <a th:href="@{/music/songlist(id=3)}">
                                            <img th:src="@{/image/music/musiclist/rep.jpg}"class="img-circle img-responsive center-block" />
                                            <span class="glyphicon glyphicon-headphones">rep</span></a>
                                        </div>
                                        <div class="col-md-6 column image">
                                            <a th:href="@{/music/songlist(id=4)}">
                                            <img th:src="@{/image/music/musiclist/lu.jpg}" class="img-circle img-responsive center-block" />
                                            <span class="glyphicon glyphicon-headphones" >luhan</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </p>
            </div>
<!--   -->
    <hr>
<!--榜单-->
            <div class="jumbotron well">
                <h4 class="text-center text-info">新歌速递</h4>
                <p>
                <div class="row clearfix">
                    <div class="col-md-4 column">
                            <div class="col-md-12 column">
                                <table class="table table-striped">
                                    <tr th:each="model : ${musiclist1}">
                                        <td >
                                            <span class="musicName" th:text="${model.musicname}"></span>
                                            <a class="glyphicon glyphicon-headphones pull-right"onclick="btn(id);" th:id="${model}"></a>
                                            <a th:href="@{/user/collect(name=${model.musicname})}" onclick="getCollection();" class="btn1 glyphicon glyphicon-heart pull-right pull-right">&nbsp;&nbsp;</a>
                                            <a th:name="${model.musicname}" onclick="btn3(name);" data-toggle="modal" data-target="#myModal" class="glyphicon glyphicon-comment pull-right" >&nbsp;&nbsp;</a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-4 column">
                            <div class="col-md-12 column">
                                <table class="table table-striped">
                                    <tr th:each="model : ${musiclist2}">
                                        <td >
                                            <span th:text="${model.musicname}"></span>
                                            <a class="glyphicon glyphicon-headphones pull-right"onclick="btn(id);" th:id="${model}"></a>
                                            <a th:href="@{/user/collect(name=${model.musicname})}" onclick="getCollection();" class="btn1 glyphicon glyphicon-heart pull-right pull-right" >&nbsp;&nbsp;</a>
                                            <a th:name="${model.musicname}" onclick="btn3(name);" data-toggle="modal" data-target="#myModal" class="glyphicon glyphicon-comment pull-right" >&nbsp;&nbsp;</a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-4 column">
                            <div class="col-md-12 column">
                                <table class="table table-striped">
                                    <tr th:each="model : ${musiclist3}">
                                        <td >
                                            <span th:text="${model.musicname}"></span>
                                            <a class="glyphicon glyphicon-headphones pull-right"onclick="btn(id)" th:id="${model}"></a>
                                            <a th:href="@{/user/collect(name=${model.musicname})}"onclick="getCollection();" class="btn1 glyphicon glyphicon-heart pull-right pull-right">&nbsp;&nbsp;</a>
                                            <a th:name="${model.musicname}" onclick="btn3(name);" data-toggle="modal" data-target="#myModal" class="glyphicon glyphicon-comment pull-right" >&nbsp;&nbsp;</a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                    </div>
                </p>
            </div>
        <hr>
    </div>
<!--    音乐播放器-->
    <footer th:replace="index/index :: footer">
    </footer>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form th:action="@{/music/userComment}" method="post">
                    <input type="text" id="date" hidden name="date">
                    <input type="text" id="musicname" hidden name="musicname">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">有什么新鲜事告诉大家？</h4>
                </div>
                <div class="modal-body">
                    <input type="text" id="musicn" name="musicname" hidden>
                    <input style="width:570px;height:100px" type="text" placeholder="请输入......" id="text" name="text">
    </div>
             <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                 <input type="submit" class="btn btn-primary" value="发表">
                </div>
             </form>
             </div>
        </div>
    </div>
        </body>
<script th:src="@{/bootstrap-3.3.7-dist/jquery/jquery.min.js}"></script>
<script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<script th:inline="javascript" th:src="@{/bootstrap-3.3.7-dist/js/mc_music.js}"></script>
</html>